<template>
    <div id="searchProup">
        <van-sticky>
            <van-search
            v-model="searchVal"
            show-action
            :placeholder="placeholderVal"
            @search="onSearch"
            @cancel="onCancel"
            @input="handleSearch"
        />
        </van-sticky>
        
        <!-- 搜索历史热门组件 -->
        <HistoryHot
            v-if="blockShow == 1"
            :searchHistoryData="searchHistoryData"
            :searchHotData="searchHotData"
            @fn="changeVal"
        >
        </HistoryHot>
        <!-- 搜索列表 -->
        <SearchTipsList
            v-if="blockShow == 2"
            :searchTipsArr="searchTipsArr"
            @list="changeVal"
        ></SearchTipsList>
        <!-- 产品列表 -->
        <SearchProducts
            v-if="blockShow == 3"
            :goodsList="goodsList"
            :searchVal="searchVal"
            :filterCategory="filterCategory"
            @categoryChange="categoryChange"
        ></SearchProducts>
    </div>
</template>

<script>
import HistoryHot from "../components/search/HistoryHot";
import SearchTipsList from "../components/search/SearchTipsList";
import SearchProducts from "../components/search/SearchProducts";

import {
    GetPopupData,
    GetSearchTipsListData,
    GetSearchData,
} from "../request/api";
export default {
    data() {
        return {
            searchVal: "", //搜索值
            placeholderVal: "", //获取到的
            searchHistoryData: "", //搜索历史结果
            searchHotData: "", //搜索热门数据
            /* blockShow决定区块展示，
            如果是1，展示历史记录和热门搜索 HistoryHot
            如果是2，展示搜索提示列表 SearchTipsList
            如果是3，展示搜索出来内容 */
            blockShow: 1, //控制组件是否显示
            searchTipsArr: [], //搜索列表
            goodsList: [], //搜索出来的商品
            filterCategory: [], //分类数据
            categoryId: "0", //分类id
        };
    },
    components: {
        HistoryHot,
        SearchTipsList,
        SearchProducts,
    },
    methods: {
        //回车搜索方法
        onSearch() {
            this.blockShow = 3;
            this.getSearchData(this.searchVal);
        },
        //点击取消返回上级路由
        onCancel() {
            this.$router.push('/home');
            // 把是否展示阴影 的变量该成false。
            this.$store.commit("chanIsShowShadow", false);
        },
        //监听输入框值
        handleSearch() {
            this.blockShow = 2;
            // 这个val就是用户输入的文字
            GetSearchTipsListData({ keyword: this.searchVal }).then((res) => {
                this.searchTipsArr = res.data;
            });
        },
        //封装的搜索商品函数
        getSearchData(val) {
            GetSearchData({
                keyword: val,
                size: 50,
                categoryId: this.categoryId,
            }).then((res) => {
                console.log(res);
                this.goodsList = res.data.data.goodsList;
                this.filterCategory = res.data.data.filterCategory;
                //深拷贝整理数据
                let newArr = JSON.parse(
                    JSON.stringify(this.filterCategory)
                        .replace(/name/g, "text")
                        .replace(/id/g, "value")
                );
                // console.log(newArr);
                this.filterCategory = newArr;
            });
        },
        //给外界提供一个改我值的方法
        changeVal(val) {
            this.searchVal = val;
            this.blockShow = 3;
            this.getSearchData(this.searchVal);
        },
        categoryChange(value) {
            // 子传父改分类id
            this.categoryId = value;
            // 发送搜索商品的请求
            this.blockShow = 3;
            this.getSearchData(this.searchVal);
        },
    },
    //发送网络请求，获取历史热门搜索
    created() {
        GetPopupData().then((res) => {
            this.searchHistoryData = res.data.data.historyKeywordList;
            this.searchHotData = res.data.data.hotKeywordList;
            this.placeholderVal = res.data.data.defaultKeyword.keyword;
        });
    },
};
</script>
 
<style lang = "less" scoped>
#searchProup {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    overflow: scroll;
    background: #efefef;
}
</style>